.topPlace {
	width: 100%;
	height: var(--status-bar-height);
	background: transparent;
}
/* 文字对齐*/
.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right;
}
/*浮动与清除浮动*/
.fl {
	float: left;
}

.fr {
	float: right;
}

/*#ifdef H5*/
.fix {
	zoom: 1;
}

.fix:after {
	display: table;
	content: '';
	clear: both;
}
/*#endif*/

/*显示*/
.dn {
	display: none;
}

.di {
	display: inline;
}

.db {
	display: block;
}

.dib {
	display: inline-block;
}

.dt {
	display: table;
}
/*#ifdef H5*/
div.dib {
	display: inline;
	zoom: 1;
}
/*#endif*/

.vm {
	vertical-align: middle;
}

.vib {
	display: inline-block;
	vertical-align: middle;
}

/*定位*/
.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}
/*单行文本溢出省略号*/
.one-t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}

/* ==================
          flex布局(colorui里面也有相关基础样式)
 ==================== */
 .u-flex-wrap {
 	flex-wrap: wrap;
 }
 
 .u-flex-nowrap {
 	flex-wrap: nowrap;
 }
 
 .u-col-center {
 	align-items: center;
 }
 
 .u-col-top {
 	align-items: flex-start;
 }
 
 .u-col-bottom {
 	align-items: flex-end;
 }
 
 .u-row-center {
 	justify-content: center;
 }
 
 .u-row-left {
 	justify-content: flex-start;
 }
 
 .u-row-right {
 	justify-content: flex-end;
 }
 
 .u-row-between {
 	justify-content: space-between;
 }
 
 .u-row-around {
 	justify-content: space-around;
 }
/* x水平排列*/
.x-f {
	display: flex;
	align-items: center;
}
/*x两端且水平居中*/
.x-bc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/*x平分且水平居中*/
.x-ac {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
/*x水平靠上对齐*/
.x-start {
	display: flex;
	align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
	display: flex;
	align-items: flex-end;
}
/*上下左右居中*/
.x-c {
	display: flex;
	justify-content: center;
	align-items: center;
}
/*y竖直靠左*/
.y-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
/*y竖直居中*/
.y-f {
	display: flex;
	flex-direction: column;
	align-items: center;
}
// y竖直两端
.y-b {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.y-a{
	display: flex;
	flex-direction: column;
	// align-items: center;
	justify-content: space-around;
}
.y-ac {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

/*透明*/
.opa10{opacity: 1;}
.opa9{opacity: .9;}
.opa8{opacity: .8;}
.opa7{opacity: .7;}
.opa6{opacity: .6;}
.opa5{opacity: .5;}
.opa4{opacity: .4;}
.opa3{opacity: .3;}
.opa2{opacity: .2;}
.opa1{opacity: .1;}
.opa0{opacity: 0;}
/*字体*/
@for $i from 9 to 100 {
	.f#{$i}r {
		font-size: $i + rpx;
	}
}

/*字体颜色*/
.color-000{color: #000000;}
.color-111{color: #111111;}
.color-222{color: #222222;}
.color-333{color: #333333;}
.color-666{color: #666666;}
.color-999{color: #999999;}
.color-aaa{color: #AAAAAA;}
.color-bbb{color: #BBBBBB;}
.color-ccc{color: #CCCCCC;}
.color-ddd{color: #DDDDDD;}
.color-eee{color: #EEEEEE;}
.color-fff{color: #FFFFFF;}
.color-or{color: orange;}
.color{color: $zhuse;}
.color-zs{color: $zhuse;}
.color-fs{color: $fuse;}
.color-red{color: red;}
.color-green{color: green;}
/*字体粗细*/
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-w{font-weight: bold;}
/*字体间距*/
.l-h1{line-height: 1;}
.l-h15{line-height: 1.5;}
.l-h2{line-height: 2;}
.l-h25{line-height: 2.5;}

/*背景颜色*/

.bg-000{background-color: #000000;}
.bg-111{background-color: #111111;}
.bg-222{background-color: #222222;}
.bg-333{background-color: #333333;}
.bg-444{background-color: #444444;}
.bg-555{background-color: #555555;}
.bg-666{background-color: #666666;}
.bg-777{background-color: #777;}
.bg-888{background-color: #888;}
.bg-999{background-color: #999;}
.bg-aaa{background-color: #AAAAAA;}
.bg-bbb{background-color: #bbbbbb;}
.bg-ccc{background-color: #CCCCCC;}
.bg-ddd{background-color: #DDDDDD;}
.bg-eee{background-color: #EEEEEE;}
.bg-fff{background-color: #FFFFFF;}
.bg-f7f{background-color: #F7F7F7;}
.bg-zs{background-color: $zhuse;}
.bg-fs{background-color: $fuse;}
.bg{background-color:$zhuse}

/* 外边距 */
.mauto-x{margin: 0 auto;}
// 定义内外边距，历遍1-500
@for $i from 0 through 500 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：u-margin-30或者u-m-30
		.u-margin-#{$i}, .m#{$i}r {
			margin: $i + rpx;
		}
		
		// 得出：u-padding-30或者u-p-30
		.u-padding-#{$i}, .p#{$i}r {
			padding: $i + rpx;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： u-m-l-30
			// 定义外边距
			.m#{$short}#{$i}r {
				margin-#{$long}: $i + rpx;
			}
			
			// 定义内边距
			.p#{$short}#{$i}r {
				padding-#{$long}: $i + rpx;
			}
		}
	}
}

.p0 {padding:0;}
.pl0 {padding-left:0;}
.pr0 {padding-right:0;}
.pt0 {padding-top:0;}
.pb0 {padding-bottom:0;}
/* 宽 */
.w25{width: 25%;}
.w33{width: 33.333%;}
.w50{width: 50%;}
.w100{width: 100%;}

// 定义width
@for $i from 1 through 1000 {
	.w#{$i}r {
		width: $i+ rpx;
	}
}
/* 高 */
.h25{height: 25%;}
.h33{height: 33.333%;}
.h50{height: 50%;}
.h100{height: 100%;}
// 定义height
@for $i from 1 through 1000 {
	.h#{$i}r {
		height: $i+ rpx;
	}
}

/* 边框 */
.bor{border: 1px solid #F7F7F7;}
.bor-l{border-left: 1px solid #F7F7F7;}
.bor-r{border-right: 1px solid #F7F7F7;}
.bor-t{border-top: 1px solid #F7F7F7;}
.bor-b{border-bottom: 1px solid #F7F7F7;}

/* border-radius等分 */
.bor-rad50{border-radius: 50%;}
@for $i from 0 through 100 {
	.bor-rad#{$i}r {
		border-radius: $i+ rpx;
	}
}
.bor-rad-t0{border-top-left-radius: 0 ;border-top-right-radius: 0;}
.bor-rad-b0{border-bottom-left-radius: 0 ;border-bottom-right-radius: 0;}
.bor-rad-l0{border-top-left-radius: 0 ;border-bottom-left-radius: 0;}
.bor-rad-r0{border-top-right-radius: 0;border-bottom-right-radius: 0;}

/* flex */
.flex1{flex: 1;}
.als-s{align-self: stretch;}

/* flex */
/*定位*/
.pr{position: relative;}
.pa{position: absolute;}
.pf{position: fixed}
// .top0{top}